<template>
  <div class="in-singer border-t-1 yu-color-text p-2">
    <div class="title h-10 flex items-center justify-between border-b-1 mb-4">
      <span>入驻歌手</span>
      <span class="cursor-pointer yu-textColor-hover">查看全部 ></span>
    </div>
    <div class="singer">
      <span v-for="artist in topFiveArtists" :key="artist.id" @click="jumpUser(artist.accountId)" class="flex mb-2 cursor-pointer transition duration-200 yu-bgColor-hover">
        <span class="w-15 h-15 block mr-2">
          <img class="w-full h-full" :src="artist.img1v1Url" alt="">
        </span>
        <span class="flex flex-col justify-around">
          <span>
            {{ artist.name }}
          </span>
          <span>别名：{{ artist?.alias[0] }}</span>
        </span>
      </span>
    </div>
    <div class="application flex justify-center mt-2">
      <YubButton @click="jumpExternalLink">
        申请成为网易云音乐人
      </YubButton>
    </div>
  </div>
</template>

<script setup>
import {getTopArtists} from "@/api/singer/index"
import {ref} from "vue";
import {useRouter} from "vue-router";
import YubButton from '@/components/YuButton/index.vue'
// 存储前五的歌手
const topFiveArtists = ref([])
const router = useRouter()

// 获取5个热门歌手
getTopArtists({ limit: 5, offset: 2 }).then(res => {
  const {code, artists} = res
  if (Number(code) === 200) {
    topFiveArtists.value = artists
  }
  // console.log(res)
})
const jumpUser = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

// 申请成为网易云音乐人
const jumpExternalLink = () => {
  window.open('https://music.163.com/st/musician',"_blank")
}
</script>

<style lang="scss">

</style>
